<template>
  <!-- 发起坞修 -->
  <div class="dockRepair">
    <div class="g-con">
      <!-- <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">
            {{ t('home') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">
            {{ t('header.menu1') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            {{ t('dockRepair.InitiateDockRepair') }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->

      <div class="number">
        <div
          v-if="store.activeStep !== 0"
          class="tit"
        >
          <!-- {{ t('dockRepair.orderNumber') }}：{{ store.orderInfo.orderNo }} -->
          {{ store.orderInfo.dockOrderName }}
        </div>
        <div
          v-else
          class="name-select flexcc"
        >
          <div class="ship-name flexsc">{{ store.ship.shippingName }}</div>
          <el-select
            v-model="store.orderInfo.count"
            :placeholder="t('dockRepair.placeholderCount')"
            size="large"
            filterable
            @change="natureChange1"
          >
            <el-option
              v-for="item in dictData['repair_count']"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
          <el-select
            v-model="store.orderInfo.nature"
            :placeholder="t('dockRepair.nature')"
            size="large"
            @change="natureChange"
            filterable
          >
            <el-option
              v-for="item in dictData['nature_of_repair']"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="g-con">
        <!-- <div class="step">
          <div
            :class="['bold', 'item', 'flexcc', { active: index === store.activeStep }]"
            v-for="(item, index) in store.steplist"
            :key="index"
          >
            <span>{{ t(`dockRepair.${item}`) }}:</span>
            <span>{{ t(`dockRepair.${item}Desc`) }}</span>
          </div>
        </div> -->
        <!--  -->
        <step1 v-show="store.activeStep === 0" />
        <step2 v-if="store.activeStep === 1" />
        <step3 v-show="store.activeStep === 2" />
        <step4 v-if="store.activeStep === 3" />
        <!--  -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onBeforeMount, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useDockRepair from '@/stores/dockRepair.js'
import { getDetailApi } from '@/service/dockOrder'
import { storeToRefs } from 'pinia'
import step1 from './Step1.vue'
import step2 from './Step2.vue'
import step3 from './Step3.vue'
import step4 from './Step4.vue'

import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()

const router = useRouter()
const route = useRoute()
watch(route, (n) => {
  reset()
})

const type = ref(route.query.type)

onBeforeMount(() => {
  init()
})

const { t, locale } = useI18n()
watch(locale, (n) => {
  init(false)
})

const store = useDockRepair()
const { reset, setActiveStep, setOrderInfo, setOrderInfoKey, next } = store
const { orderInfo } = storeToRefs(store);

// 回显
const getData = () => {
  getDetailApi(store.orderInfo.id).then(({ data }) => {
    setOrderInfo(data)
  })
}

// 从坞修单列表 进入时
const fromList = () => {
  const id = route.query.id
  if (!id) return

  setOrderInfoKey('id', Number(id))
  // 编辑
  if (type.value === 'edit') {
    setActiveStep(1)
  }
  // 询价
  if (type.value === 'inquiry') {
    getData()
    setActiveStep(2)
  }
}

const natureChange1 = (val) => {
  dictData.value['repair_count'].forEach(item => {
    if (item.dictValue === val) {
      orderInfo.countEn = item.dictLabelEn
      orderInfo.countCn = item.dictLabelCn
      orderInfo.count = item.dictLabel
    }
  });
}

const natureChange = (val) => {
  dictData.value['nature_of_repair'].forEach(item => {
    if (item.dictValue === val) {
      orderInfo.nature = item.dictLabel
      orderInfo.natureEn = item.dictLabelEn
      orderInfo.natureCn = item.dictLabelCn
    }
  });
}

const init = (isFirst = true) => {
  getDictData('repair_count') // 维修次数
  getDictData('nature_of_repair') // 维修性质
  if (isFirst) {
    fromList()
  }
}
</script>

<style scoped lang="scss">
.dockRepair {
  position: relative;
  padding-top: 100px;
  margin-bottom: -76px;

  .breadcrumb {
    padding: 30px 0;
    border-bottom: 2px solid #eaebec;
  }

  .number {
    padding: 30px 0;
    .tit {
      font-size: 20px;
      font-weight: bold;
    }
    .name-select {
      display: grid;
      grid-template-columns: repeat(3, 260px);
      gap: 13px;
      .ship-name {
        border: 1px solid #dcdfe6;
        border-radius: 5px;
        padding: 1px 15px;
        height: 40px;
      }
    }
  }

  .main {
    background: #f5f5f5;
    padding: 30px 0 0;

    .step {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 60px;
      height: 60px;
      padding: 10px;
      background: #252628;
      border-radius: 30px;
      color: #fff;
      .item {
        position: relative;
        &.active {
          background: var(--mainColor);
          border-radius: 30px;
        }
        &:not(:last-of-type)::after {
          content: '';
          display: block;
          width: 30px;
          height: 0px;
          border-bottom: 2px dashed #a3a5a9;
          position: absolute;
          top: 50%;
          left: calc(100% + 15px);
        }
      }
    }

    :deep(.bold) {
      span {
        font-weight: bold;
        line-height: 1;
        font-size: 18px;
        &:nth-of-type(1) {
          margin-right: 5px;
        }
        &:nth-of-type(2) {
          // font-size: 12px;
        }
      }
    }
  }
}
</style>
